<template>
  <div class="app-container">
    <n-alert title="打开指定应用" type="success">
      可以使用默认应用打开，也可以选择指定应用打开。
      <br />
      注意：需要在<n-tag>src-tauri/capabilities/default.json</n-tag>中声明权限
    </n-alert>

    <n-button @click="handleChooseFile">选择文件</n-button>
    <div v-if="filePath">当前选择的路径：{{ filePath }}</div>

    <div>
      <n-button @click="handleOpen" style="margin: 8px 0;">使用默认应用打开</n-button>
      <br>
      <n-button @click="handleOpenWith">使用指定应用打开</n-button>
    </div>
  </div>
</template>

<script setup>
import { open } from '@tauri-apps/plugin-dialog';
import { openPath } from '@tauri-apps/plugin-opener';

import { ref } from "vue";
import {  useMessage } from "naive-ui";
const message = useMessage();

const filePath = ref('');

const handleChooseFile = async () => {
  const path = await open({
    directory: false,
    multiple: false,
    title: '选择文件'
  });
  if (path) {
    filePath.value = path;
  }
};

// 默认应用打开
const handleOpen = async () => {
  if(!filePath.value) {
    message.warning('您还没有选择文件哦~')
    return;
  }
  await openPath(filePath.value);
}

// 指定应用打开，此处指定 系统自带的图片查看器为例，todo:权限没配置好
const handleOpenWith = async () => {
  if(!filePath.value) {
    message.warning('您还没有选择文件哦~')
    return;
  }

  await openPath(filePath.value, 'Photos');
};

</script>

<style scoped>

</style>
